<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <canvas id="canvasgl" width="800" height="600">
      your browser don't support canvas
    </canvas>

    <script src="../lib/webgl-utils.js"></script>
    <script src="../lib/webgl-debug.js"></script>
    <script src="../lib/cuon-utils.js"></script>
    <script src="../lib/cuon-matrix.js"></script>

    <script>
      var VSHADER_SOURCE = `
            attribute vec4 a_Position;
            attribute float a_PointSize;
            void main(){
                gl_Position = a_Position;
                gl_PointSize = a_PointSize;
            }
        `;

      var FSHADER_SOURCE = `
            void main(){
                gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);
            }
        `;

      /** @type {HTMLCanvasElement}*/
      var canvas = document.getElementById("canvasgl");
      var gl = getWebGLContext(canvas);
      if (!gl) throw new Error("can't init gl");

      if (!initShaders(gl, VSHADER_SOURCE, FSHADER_SOURCE))
        throw new Error("can't init shaders");

      var n = initVetexBuffers(gl);

      gl.clearColor(0.0, 0.0, 0.0, 1.0);
      gl.clear(gl.COLOR_BUFFER_BIT);
      gl.drawArrays(gl.POINTS, 0, n);

      function initVetexBuffers() {
        var vertices = new Float32Array([-0.5, 0.5, 0.0, 0.5, 0.5, 0.5]);
        var sizes = new Float32Array([10.0, 20.0, 30.0]);
        var n = 3;

        var vertexBuffer = gl.createBuffer();
        gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
        gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);
        var a_Position = gl.getAttribLocation(gl.program, "a_Position");
        gl.vertexAttribPointer(a_Position, 2, gl.FLOAT, false, 0, 0);
        gl.enableVertexAttribArray(a_Position);

        var sizeBuffer = gl.createBuffer();
        gl.bindBuffer(gl.ARRAY_BUFFER, sizeBuffer);
        gl.bufferData(gl.ARRAY_BUFFER, sizes, gl.STATIC_DRAW);
        var a_PointSize = gl.getAttribLocation(gl.program, "a_PointSize");
        gl.vertexAttribPointer(a_PointSize, 1, gl.FLOAT, false, 0, 0);
        gl.enableVertexAttribArray(a_PointSize);
        return n;
      }
    </script>
  </body>
</html>
